<template>
  <div class="app-container">
    <el-card
      v-loading="dataRequestLoading"
      element-loading-text="正在加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
    >
      <el-page-header @back="goBack" />

      <h5>基本信息</h5>
      <table class="table-bordered">
        <tr>
          <th>订单编号</th>
          <td>{{ data_print_order_info.order_number }}</td>
          <th>订单状态</th>
          <td>{{ status_text(data_print_order_info.status) }}</td>
          <th>下单时间</th>
          <td>{{ data_print_order_info.create_time }}</td>
        </tr>
        <tr>
          <th>订单金额</th>
          <td v-permission="['cloud-print-order-price']">{{ data_print_order_info.price }}</td>
          <th>实际支付</th>
          <td v-permission="['cloud-print-order-price']">{{ data_print_order_info.actual_price }}</td>
          <th>优惠券金额</th>
          <td v-permission="['cloud-print-order-price']">0</td>
        </tr>
      </table>

      <el-divider />

      <h5>用户信息</h5>
      <table class="table-bordered">
        <tr>
          <th>用户昵称</th>
          <td>
            <el-image :src="data_print_order_info.avatar_url" style="width:13px;height:13px" :preview-src-list="[data_print_order_info.avatar_url]" />
            {{ data_print_order_info.nick_name }}
          </td>
          <th>联系方式</th>
          <td>{{ data_print_order_info.telephone }}</td>
          <th>用户性别</th>
          <td>{{ data_print_order_info.gender }}</td>
        </tr>
        <tr>
          <th>微信所在地</th>
          <td>{{ data_print_order_info.wechat_area }}</td>
          <th>所在区域编号</th>
          <td>{{ data_print_order_info.area_number }}</td>
          <th>所在区域</th>
          <td>{{ data_print_order_info.area_name }}</td>
        </tr>
        <tr>
          <th>收货地址</th>
          <td>{{ data_print_order_info.shipping_address }}</td>
          <th>所在区域地址</th>
          <td>{{ data_print_order_info.area_address }}</td>
        </tr>
      </table>

      <el-divider />

      <h5>打印详情</h5>
      <table class="table-bordered">
        <tr>
          <th>文件名称</th>
          <td>{{ data_print_order_info.file_name }}</td>
          <th>打印文件类型</th>
          <td>{{ data_print_order_info.file_type }}</td>
          <th>文档页数</th>
          <td>{{ data_print_order_info.file_page_number }}</td>
        </tr>
        <tr>
          <th>打印类型</th>
          <td>{{ cloud_print_type[data_print_order_info.cloud_print_type] }}</td>
          <th>打印类型名称</th>
          <td>{{ data_print_order_info.cloud_print_type_name }}</td>
          <th>打印份数</th>
          <td>{{ data_print_order_info.file_page_number }}</td>
        </tr>
        <tr>
          <th>是否双面打印</th>
          <td>{{ is_true[data_print_order_info.is_two_sided_print] }}</td>
          <th>是否彩色打印</th>
          <td>{{ is_true[data_print_order_info.is_colorful_print] }}</td>
          <th>是否已打印</th>
          <td>{{ is_true[data_print_order_info.is_print] }}</td>
        </tr>
        <tr>
          <th>支付方式</th>
          <td>{{ payment_type[data_print_order_info.payment_type] }}</td>
          <th>打印提取码</th>
          <td>{{ data_print_order_info.code }}</td>
          <th>商家备注</th>
          <td>{{ data_print_order_info.remark }}</td>
        </tr>
      </table>
    </el-card>

    <el-card
      v-loading="dataRequestLoading"
      element-loading-text="正在加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      header="配送详情"
      class="w50"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in data_print_order_trace"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { getPrintOrderInfo } from '@/api/order-manage'

export default {
  data() {
    return {
      // loading开关
      dataRequestLoading: false,

      // 显示订单状态
      status: [
        { color: 'danger', label: '未支付', value: 0 },
        { color: 'info', label: '订单已取消', value: 1 },
        { color: 'primary', label: '已支付未打印', value: 2 },
        { color: 'danger', label: '退款中', value: 3 },
        { color: 'info', label: '已退款', value: 4 },
        { color: 'warning', label: '申诉中', value: 5 },
        { color: 'success', label: '已完成', value: 6 },
        { color: 'primary', label: '已发布需求', value: 7 },
        { color: 'warning', label: '特殊订单', value: 8 }
      ],

      // 显示打印类型
      cloud_print_type: {
        0: '文件打印',
        1: '图片打印'
      },

      // 显示是否
      is_true: {
        0: '否',
        1: '是'
      },

      // 显示支付方式
      payment_type: {
        1: '余额支付',
        2: '微信支付'
      },

      // 页面传递print_order_id
      id: '',

      // 请求返回值
      data_print_order_info: '',
      data_print_order_trace: ''
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getPrintOrderInfo() // 查询打印订单详情信息
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },

    // 查询打印订单详情信息
    getPrintOrderInfo() {
      this.dataRequestLoading = true
      getPrintOrderInfo({ print_order_id: this.id }).then(res => {
        this.dataRequestLoading = false
        this.data_print_order_info = res.result.printOrderInfo
        if (res.result.printOrderTrace.length === 0) {
          this.data_print_order_trace = [{ content: '暂无消息', timestamp: '--' }]
        } else {
          this.data_print_order_trace = res.result.printOrderTrace
        }
      })
    },

    // 显示打印订单状态
    status_text(data) {
      if (data === undefined) {
        return '--'
      }
      const status = this.status.filter(v => {
        if (v.value === data) {
          return v.label
        }
      })
      return status[0].label
    }
  }
}
</script>

<style scoped lang="sass">
  .app-container
    .el-card
      margin-bottom: 16px
      .table-bordered
        border-collapse: collapse
        margin: 0 auto
        text-align: center
        width: 100%
        font-size: 14px
        th
          font-weight: 600
          background: #F5FAFA
        td, th
          border: 1px solid #e6ebf5
          color: #666
          height: 30px
        tr:nth-child(odd)
          background: #fff
  .w50
    width: 49.8%
    display: inline-block
    vertical-align: top
  .record-wrap
    min-height: 450px
</style>
